import axios from "axios";
import React, { useEffect, useState } from "react";
import { ListItemType } from "../../types";
import { Flex, Card, Image, Toast, Space, Button } from "react-vant";
import { Arrow, Like } from "@react-vant/icons";
import { useNavigate } from "react-router-dom";
const Index: React.FC = () => {
  const [list, setList] = useState<ListItemType[]>([]);
  const navigate = useNavigate();
  const fetchList = async () => {
    const resp = await axios.get("/api/list");
    setList(resp.data.data);
  };

  useEffect(() => {
    fetchList();
  }, []);

  // 瀑布流 一排两个
  return (
    <div style={{ columnCount: 2 }}>
      {list.map((v) => {
        return (
          <Card
            onClick={() => navigate("/post/" + v.id)}
            round
            style={{ marginBottom: 20, border: "1px solid #ccc" }}
            key={v.id}
          >
            <Card.Cover>
              <Image src={v.images[0]} />
            </Card.Cover>

            <Card.Header>{v.title}</Card.Header>
            <Card.Body>{v.desc}</Card.Body>
            <Card.Body>
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <span>￥: {v.price}</span>
                <span>库存: {v.totalCount}</span>
              </div>
            </Card.Body>
          </Card>
        );
      })}
    </div>
  );

  // 栅格一排两个
  // return (
  //   <div>
  //     <Flex wrap="wrap">
  // {list.map((v) => {
  //   return (
  //     <Flex.Item span={12} key={v.id} style={{ padding: 4 }}>
  //       <Card round style={{ marginBottom: 20 }}>
  //         <Card.Cover onClick={() => Toast.info("点击了Cover区域")}>
  //           <Image src={v.images[0]} />
  //         </Card.Cover>

  //         <Card.Header onClick={() => Toast.info("点击了Header区域")}>
  //           {v.title}
  //         </Card.Header>
  //         <Card.Body onClick={() => Toast.info("点击了Body区域")}>
  //           {v.desc}
  //         </Card.Body>
  //         <Card.Body onClick={() => Toast.info("点击了Body区域")}>
  //           <div
  //             style={{ display: "flex", justifyContent: "space-between" }}
  //           >
  //             <span>￥: {v.price}</span>
  //             <span>库存: {v.totalCount}</span>
  //           </div>
  //         </Card.Body>
  //       </Card>
  //     </Flex.Item>
  //   );
  // })}
  //     </Flex>
  //   </div>
  // );
};

export default Index;
